<template>
	<navbar title="报名信息" :isBack="true"></navbar>
	<loading v-if="!data.info"></loading>
	<template v-else>
		<view class="content" :style="{ minHeight: tools.clientTopHight() }">
			<!-- 基本信息 -->
			<basicReady :info="data.info"></basicReady>
			<!-- 团队资料 -->
			<view class="list">
				<view class="title">
					<text class="title_text">团队资料
						<text class="people">限{{ data.info.min_people }}-{{ data.info.max_people }}人</text>
					</text>
				</view>
				<teamFrom :info="data.params.team" :infos="data.info"></teamFrom>
			</view>
			<view class="list" style="padding:30rpx;" v-if="data.info.referee">
				<view class="referee">
					<view class="referee_title">是否带裁判?</view>
					<u-radio-group v-model="data.params.have_referee" placement="row" @change="refereeChange">
						<u-radio activeColor="#5062A7" name="1" :labelSize="30">带裁判 </u-radio>
						<u-radio activeColor="#5062A7" name="0" :labelSize="30">不带裁判</u-radio>
					</u-radio-group>
				</view>
				<view class="referee_info">
					<image class="referee_info_image" src="../static/icon/dannger.png" mode="aspectFit"></image>
					<view class="referee_info_text">若带裁判请在队员资料里添加裁判信息</view>
				</view>
			</view>
			<view class="list flex-direction-column">
				<view v-for="(item, index) in data.params.formList" :key="index">
					<!-- 参赛选手信息 -->
					<view class="title flex-space-between">
						<text class="title_text">队员资料</text>
						<view class="title_del" v-if="index+1 >data.info.min_people" @click.stop="de(index)">删除该成员
						</view>
					</view>
					<customForm ref="formRef" bg="#fff" :formList="item"></customForm>
				</view>
				<!-- <view class="item flex-space-between" v-for="(item, index) in data.params.formList" :key="index" @click="itemClick(item, index)">
          <view class="left flex-direction-column" v-if="JSON.stringify(item) != '{}'">
            <view class="name flex"
              ><text>{{ item[0].value }}</text></view
            >
            <view class="no">{{ item[1].value }}</view>
          </view>
          <view class="left" v-else>+报名人信息</view>
          <view class="right flex">
            <view class="operate flex" v-if="JSON.stringify(item) != '{}'">
              <image src="/pagesA/static/image/18.png"></image>
              <text>修改</text>
            </view>
            <view class="operate flex" v-if="data.params.formList.length != data.info.min_people" @click.stop="de(index)">
              <image src="/pagesA/static/image/19.png"></image>
              <text>删除</text>
            </view>
          </view>
        </view> -->
			</view>
			<view class="add flex" v-if="data.params.formList.length != data.info.max_people" @click.stop="add">
				<image style="width: 36rpx; height: 36rpx;padding-right: 5rpx;" src="/static/icon/xinzeng.png"></image>
				<view>
					新增报名人
				</view>
			</view>
			<!-- 协议 -->
			<!-- <agree ref="agreeRef" :html="data.info.treaty" :list="['参赛条款']"></agree> -->
		</view>
		<view class="bottom flex-space-between">
			<view class="price">{{ tools.isFree(data.info.price) }} </view>
			<view class="btn" @click="submit">提交报名</view>
		</view>
		<view v-if="data.showTrue">
			<u-popup v-model="data.showTrue" :mask-close-able="false" mode="center"  width="596rpx" height="396rpx" borderRadius="20">
				<view class="showTrue_title">填写验证码报名</view>
				<view class="showTrue_body">
					<u-input v-model="data.showTrueInput" type="text" border="true" placeholder="请输入赛事验证码" input-align="center" border-color="#2E64CE"  style="width: 530rpx;" />
				</view>
				<view class="showTrue_b">
					<view class="btn_quxiao" @click="CancalSubmit">取消</view>
					<!-- <view class="line"></view> -->
					<view class="btn_queding" @click="sureSubmit">确定</view>
				</view>
			</u-popup>
		</view>
	</template>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { getGroupDetail , checkCode} from '@/service/api/order'
	import tools from '@/utils/tools'
	import agree from '@/components/entry/agree.vue'
	// import basic from '@/components/entry/basic.vue'
	import basicReady from '@/components/entry/basicReady.vue'
	import customForm from '@/components/form/custom.vue'
	import teamFrom from '@/components/form/teamFrom.vue'
	import userPinia from '@/store/user'
	const user = userPinia()
	user.$subscribe((state : any) => {
		const formList = state.events.target.formList
		data.params.formList[data.current] = formList
		console.log(data.params.formList)
	})

	// 获取组件实例
	const agreeRef = ref(null)

	const data = reactive({
		// 0 多人 1 单人
		showTrue:false,
		showTrueInput:"",
		way: 0,
		current: 0,
		info: null,
		oldPrice: 0,
		form: [],
		code:"",
		params: {
			id: 0,
			have_referee: '0',
			code:'',
			referee: 0,
			formList: [],
			team: {
				name: '',
				team: '',
				mobile: '',
				score_imgs:[],
			},
		}
	})
	const refereeChange = () => {
		if (data.params.have_referee == '1') {
			data.info.price = Number(JSON.parse(JSON.stringify(data.oldPrice))).toFixed(2)
		} else {
			data.info.price = (Number(JSON.parse(JSON.stringify(data.oldPrice))) + Number(data.info.referee_price)).toFixed(2)
		}
	}
	// 新增按钮
	const add = () => {
		if (data.params.formList.length == data.info.max_people) return tools.showToast(`最多${data.info.max_people}人`)
		let dataC = []
		dataC = JSON.parse(JSON.stringify(data.form))
		data.params.formList.push(dataC)
	}

	// 删除按钮
	const de = (index : number) => {
		if (data.params.formList.length == data.info.min_people) return tools.showToast(`最少${data.info.min_people}人`)
		tools.showModel('提示', '是否确认删除').then(() => {
			data.params.formList.splice(index, 1)
		})
	}
	//验证码的取消
	const CancalSubmit = () => {
		uni.navigateBack()
	}
	// 验证码的确定
	const sureSubmit = async () => {
		if(data.showTrueInput){
			const res = await checkCode({
				id:data.info.id,
				code:data.showTrueInput
			})
			if (res.code == 1) {
				data.showTrue = false
				data.params.code= data.showTrueInput
			}else{
				tools.showToast(res.msg)
			}
		}else{
			tools.showToast('请输入验证码')
		}
	}
	// // 点击循环项
	// const itemClick = (item, index: number) => {
	//   data.current = index
	//   let form = JSON.stringify(item) != '{}' ? item : data.form
	//   // 1 单人 2 多人 3 个人中心
	//   tools.setStorage<number>('entryType', 2)
	//   tools.navTo('/pagesA/entry/teamForm?form=' + JSON.stringify(form))
	// }

	// 提交按钮
	const submit = () => {
		if (!data.params.team.name || !data.params.team.team || !data.params.team.mobile) return tools.showToast('请填写完整报名信息')
		let arr = []
		data.params.formList.forEach((item) => {
			item.forEach((itemC) => {
				if (itemC.prop) arr.push(itemC.value)
			})
		})
		if (arr.some((val) => val === '' || val.length == 0)) return tools.showToast('请填写完整报名信息')
		// const check = agreeRef.value.check
		// if (!check) return tools.showToast('请阅读并勾选协议')
		console.log(data);
		tools.setStorage<string>('entryInfo', JSON.stringify(data))
		tools.navTo('/pagesA/entry/confirm')
	}

	// 获取表单数据
	const getGroupDetailApi = async (id : number) => {
		const { msg } = await getGroupDetail({ id })
		msg.type = msg.active_type
		data.info = msg
		if(data.info.is_checking){
			data.showTrue=true
		}else{
			data.showTrue=false
		}
		data.oldPrice = msg.price
		data.info.price = (Number(JSON.parse(JSON.stringify(data.oldPrice))) + Number(data.info.referee_price)).toFixed(2)
		data.form = msg.sign_form
		data.params.referee = msg.referee
		let dataFrom = []
		for (let index = 0; index < data.info.min_people; index++) {
			dataFrom = JSON.parse(JSON.stringify(msg.sign_form))
			data.params.formList.push(dataFrom)
		}
	}

	onLoad((option) => {
		data.params.id = option.id
		// 获取表单数据
		getGroupDetailApi(option.id)
	})
</script>

<style lang="scss" scoped>
	.content {
		background-color: #f9f9f9;
		padding: 20rpx;
		padding-bottom: 150rpx;
	}

	.showTrue_title{
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		font-weight: 400;
		color: #000000;
		padding-top: 46rpx;
	}
	
	.showTrue_body{
		display: flex;
		justify-content: center;
		align-items: center;
		// width: 530rpx;
		margin-top: 56rpx;
	}
	
	.showTrue_b{
		border-top: 1rpx solid #EEEEEE;
		margin-top: 60rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		.btn_quxiao{
			width: 100%;
			height: 110rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			color: #000000;
			border-right: 1rpx solid #EEEEEE;
		}
		// .line{
		// 	width: 1rpx;
		// 	height: 110rpx;
		// 	background-color: #EEEEEE;
		// }
		.btn_queding{
			width: 100%;
			height: 110rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			color: #5062A7;
		}
	}
	
	.title {
		border-radius: 20rpx 20rpx 0 0;
		margin-top: 20rpx;
		background-color: #fff;
		padding: 34rpx 34rpx 30rpx 34rpx;
		// margin: 0 34rpx;
		position: relative;

		.title_text {
			width: 160rpx;
			height: 44rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 44rpx;
			color: #5062A7;
			opacity: 1;
		}

		.title_del {
			width: 176rpx;
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 40rpx;
			color: #666666;
			opacity: 1;
		}

		.people {
			top: 38rpx;
			left: 170rpx;
			height: 40rpx;
			color: #777777;
			font-size: 28rpx;
			line-height: 40rpx;
			margin-left: 28rpx;
			position: absolute;
			font-weight: normal;
		}
	}

	.list {
		padding-bottom: 44rpx;
		background-color: #fff;
		// border-radius:0 0 20rpx 20rpx;
		border-radius: 20rpx;
		margin: 20rpx 0;

		.referee {
			display: flex;
			align-items: center;

			.referee_title {
				font-size: 30rpx;
				font-weight: bold;
				color: #000000;
				margin-right: 90rpx;
			}
		}

		.referee_info {
			display: flex;
			align-items: center;
			margin-top: 26rpx;

			.referee_info_image {
				width: 36rpx !important;
				height: 36rpx !important;
			}

			.referee_info_text {
				margin-left: 10rpx;
				font-size: 28rpx;
				color: #F2672B;
			}
		}

		.item {
			width: 700rpx;
			padding: 26rpx;
			border-radius: 10rpx;
			margin: 0 auto 40rpx auto;
			border: 1px solid #eeeeee;

			.left {
				width: 416rpx;
				color: #666666;
				font-size: 28rpx;

				.name {
					color: #000;

					text {
						&:nth-child(1) {
							margin-right: 50rpx;
						}
					}
				}

				.no {
					color: #000;
					margin-top: 10rpx;
				}
			}

			.right {
				.operate {
					image {
						width: 26rpx;
						height: 26rpx;
					}

					text {
						font-size: 28rpx;
						margin-left: 10rpx;
					}
				}
			}
		}
	}

	.add {
		margin-bottom: 32rpx;
		color: #5062A7;
		height: 100rpx;
		font-size: 32rpx;
		// text-align: center;
		padding: 0 250rpx;
		// margin-left: 26rpx;
		border-radius: 20rpx;
		background: #FFFFFF;
	}

	.bottom {
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		z-index: 10;
		// height: 160rpx;
		position: fixed;
		background-color: #fff;
		// padding-bottom: 60rpx;
		padding-left: 30rpx;
		box-shadow: 0rpx -8rpx 12rpx rgba(0, 0, 0, 0.08);

		.price {
			height: 50rpx;
			display: flex;
			color: #e6425e;
			font-size: 40rpx;
			line-height: 50rpx;

			&::before {
				content: '总计：';
				color: #000000;
				font-size: 28rpx;
			}
		}

		.btn {
			color: #fff;
			height: 100rpx;
			width: 440rpx;
			line-height: 100rpx;
			text-align: center;
			border-radius: 6rpx;
			background: linear-gradient(270deg, #354678 0%, #5062A7 100%);
		}
	}
</style>